<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>学生管理 - 学生教师管理系统</title>
    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind 配置 -->
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<!-- 导航栏容器 -->
<div id="navbarContainer"></div>

<nav class="bg-white/68 shadow-md">
    <!-- 导航栏内容（保持原样） -->
</nav>

<!-- 学生管理内容 -->
<main class="flex-grow container mx-auto px-4 py-8">
    <div id="studentsSection">
        <div class="bg-white/80 rounded-lg shadow-lg overflow-hidden mb-8">
            <div class="bg-primary p-4">
                <h2 class="text-white text-xl font-bold flex items-center">
                    <i class="fa fa-users mr-2"></i> 学生列表
                    <button class="ml-auto bg-white/80 text-primary px-4 py-1 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors"
                            id="addStudentBtn">
                        <i class="fa fa-plus mr-1"></i> 添加学生
                    </button>
                </h2>
            </div>
            <div class="p-4">
                <div class="flex justify-between mb-4">
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-search"></i>
                            </span>
                        <input class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200" id="studentSearch" placeholder="搜索学生..."
                               type="text">
                    </div>
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-1 rounded-md text-sm font-medium transition-colors"
                            id="refreshStudents">
                        <i class="fa fa-refresh mr-1"></i> 刷新
                    </button>
                </div>
                <div class="overflow-x-auto" id="studentsTable">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                学号
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                班级
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                姓名
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                年龄
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                性别
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                成绩
                            </th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody class="bg-white/80 divide-y divide-gray-200" id="studentsBody">
                        <tr class="text-center">
                            <td class="px-6 py-12 text-gray-500" colspan="7">
                                <i class="fa fa-spinner fa-spin text-2xl mb-2"></i>
                                <p>加载中...</p>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 添加学生模态框 -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="addStudentModal">
    <div class="bg-white/80 rounded-lg shadow-xl w-full max-w-md transform transition-all">
        <div class="bg-primary p-4 rounded-t-lg">
            <h3 class="text-white text-lg font-bold flex items-center">
                <i class="fa fa-user-plus mr-2"></i> 添加学生
                <button class="ml-auto text-white hover:text-gray-200" id="closeStudentModal">
                    <i class="fa fa-times"></i>
                </button>
            </h3>
        </div>
        <div class="p-6">
            <form id="addStudentForm">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="studentId">学号<span class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200" id="studentId"
                           required
                           type="text">
                </div>
                <!-- 班级输入框 + 下拉框（核心新增） -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="studentClas">班级 <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <!-- 班级输入框（支持输入搜索） -->
                        <input
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200"
                                id="studentClas"
                                type="text"
                                placeholder="输入班级ID/名称搜索或从下拉选择..."
                                required
                        >
                        <!-- 班级下拉框（动态生成选项） -->
                        <div id="classDropdown" class="hidden absolute z-10 left-0 right-0 mt-1 bg-white shadow-lg rounded-md max-h-60 overflow-y-auto"></div>
                        <!-- 隐藏字段：存储选中的班级ID（提交用） -->
                        <input type="hidden" id="studentClasId">
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="studentName">姓名<span class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200" id="studentName"
                           required
                           type="text">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="studentAge">年龄<span class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200" id="studentAge"
                           required
                           type="number">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="studentSex">性别<span class="text-red-500">*</span></label>
                    <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200"
                            id="studentSex"
                            required>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="studentGrade">成绩<span class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200" id="studentGrade" required
                           step="0.01"
                           type="number">
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors" id="cancelAddStudent"
                            type="button">
                        取消
                    </button>
                    <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
                            type="submit">保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑学生模态框 -->
<div class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" id="editStudentModal">
    <div class="bg-white/80 rounded-lg shadow-xl w-full max-w-md transform transition-all">
        <div class="bg-primary p-4 rounded-t-lg">
            <h3 class="text-white text-lg font-bold flex items-center">
                <i class="fa fa-user-edit fa-pencil mr-2 "></i> 编辑学生
                <button class="ml-auto text-white hover:text-gray-200" id="closeEditStudentModal">
                    <i class="fa fa-times"></i>
                </button>
            </h3>
        </div>

        <div class="p-6">
            <form id="editStudentForm">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="editStudentId">学号(不可修改)<span class="text-red-500">！</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm bg-gray-100" id="editStudentId"
                           readonly required type="text">
                </div>
                <!-- 编辑页班级输入框 + 下拉框（核心新增） -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="editStudentClas">班级 <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200"
                                id="editStudentClas"
                                type="text"
                                placeholder="输入班级ID/名称搜索或从下拉选择..."
                                required
                        >
                        <div id="editClassDropdown" class="hidden absolute z-10 left-0 right-0 mt-1 bg-white shadow-lg rounded-md max-h-60 overflow-y-auto"></div>
                        <input type="hidden" id="editStudentClasId">
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700" for="editStudentName">姓名<span class="text-red-500">*</span></label>
                    <input class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/20 focus:ring-opacity-50" id="editStudentName"
                           type="text">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700" for="editStudentAge">年龄<span class="text-red-500">*</span></label>
                    <input class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/20 focus:ring-opacity-50" id="editStudentAge"
                           type="number">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700" for="editStudentSex">性别<span class="text-red-500">*</span></label>
                    <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/20 focus:ring-opacity-50"
                            id="editStudentSex">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700" for="editStudentGrade">成绩<span class="text-red-500">*</span></label>
                    <input class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/20 focus:ring-opacity-50" id="editStudentGrade" step="0.01"
                           type="number">
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors" id="cancelEditStudent"
                            type="button">
                        取消
                    </button>
                    <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
                            type="submit">保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 引入css -->
<link href="../css/style.css" rel="stylesheet">
<!-- 引入JS -->
<script src="../js/index.js"></script>
<script src="../js/student.js"></script>
<script src="../js/style.js"></script>
</body>
</html>